import React, { useState } from "react";
import { NavLink, Outlet } from "react-router-dom";
import IMG from "./ckt.png";
// 组件
import Slide_Login from './Slide_Login/Slide_Login'
import { PieChartOutlined, TeamOutlined } from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme } from "antd";
const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const items = [
  getItem(
    <NavLink to={"/layout/suggest"}>为你推荐</NavLink>,
    "1",
    <PieChartOutlined />
  ),
  getItem(
    <NavLink to={"/layout/modulmb"}>模板中心</NavLink>,
    "2",
    <TeamOutlined />
  ),
  getItem(
    <NavLink to={"/layout/materialsc"}>素材中心</NavLink>,
    "3",
    <TeamOutlined />
  ),
  getItem(
    <NavLink to={"/layout/create"}>创建设计</NavLink>,
    "4",
    <TeamOutlined />
  ),
];
const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout
      style={{
        minHeight: "100vh",
      }}
    >
      <Sider>
        <div style={{ width: "100%", height: "60px", background: "#fff" }}>
          <img src={IMG} alt="" style={{ width: "100%", height: "100%" }} />
        </div>
        <div
          style={{
            position: "absolute",
            left: "300px",
            top: "0",
            width: "100%",
            // height: "100%",
            background: "#fff",
          }}
        >
          <nav style={{ width: "500px", height: "10px", float: "left" }}>
            <ul style={{ padding: 0, margin: 0, lineHeight:'52px'}}>
              <li style={{ display: "inline-block", width: "100px" }}>创建</li>
              <li style={{ display: "inline-block", width: "100px" }}>首页</li>
              <li
                style={{
                  display: "inline-block",
                  width: "100px",
                }}
              >
                创可贴AI
              </li>
              <li
                style={{
                  display: "inline-block",
                  width: "100px",
                  
                }}
              >
                定制设计
              </li>
              <li
                style={{
                  display: "inline-block",
                  width: "100px",
                 
                }}
              >
                下载App
              </li>
            </ul>
          </nav>
          
        <Slide_Login></Slide_Login>
        </div>
        
        <div className="demo-logo-vertical" />
        <Menu
          theme="light"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={items}
          style={{
            height: "100%",
            borderRight: 0,
          }}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        />
        <Content
          style={{
            margin: "0 16px",
          }}
        >
          <Breadcrumb
            style={{
              margin: "6px 0",
            }}
          ></Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 760,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </div>
        </Content>
        <Footer
          style={{
            textAlign: "center",
          }}
        >
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};
export default App;
